import { SchemaManage } from '@/components/SchemaComponent';
import React, { useRef, useMemo, useState } from 'react';
import { connect } from 'umi';
import { DeptRatioManageAPI } from '../common/type';
import { ManageTabSwitch, ManageTableSwitch } from '../mconfig';
import { RuleManageServices } from '../services';
import { UploadOutlined } from '@ant-design/icons';
import DetailModal from './DetailModal';
import { ExportModal } from './ExportModal';

const RuleManageView: React.FC<DeptRatioManageAPI.IManageView> = ({ curRes }) => {
  /**
   * 管理页services
   * */
  const { searchList, reloadRequest, pagination, data, loading } = RuleManageServices(curRes);

  /**
   * 管理页的ref
   * */
  const RuleManageViewRef: any = useRef();

  /**
   * 详情弹窗
   * */
  const [detailModal, setDetailModal] = useState<Record<string, any>>({});

  /**
   * 导出确认弹窗
   * */
  const [exportModal, setExportModal] = useState<Record<string, any>>({});

  /**
   * 头部权限的切换
   * */
  const switchList: DeptRatioManageAPI.IManageTabsSwitchType = useMemo(() => {
    return ManageTabSwitch(curRes);
  }, [curRes]);

  /**
   * 头部切换方法
   * */
  const onSwitch = (key: string | undefined | number, searchValues: any, params: any) => {
    reloadRequest({ ...params, ...searchValues });
  };

  /**
   * 重置方法
   * */
  const onReset = (reqParams: DeptRatioManageAPI.IAssetTableRequestType) => {
    reloadRequest({ ...reqParams });
  };

  /**
   * 搜索方法
   * */
  const onSearch = (reqParams: DeptRatioManageAPI.IAssetTableRequestType) => {
    reloadRequest({ ...reqParams });
  };

  /**
   * 分页方法
   * */
  const onPageChange = (current: any, pageSize: any, params: any) => {
    reloadRequest({ pageSize, current, ...params });
  };

  /**
   * 左侧按钮
   * */
  const actionList: DeptRatioManageAPI.IActionList = useMemo(() => {
    return [
      {
        title: '导出',
        visible: true,
        type: 'primary',
        icon: <UploadOutlined />,
        onClick: () => setExportModal({ isShow: true }),
      },
    ];
  }, [curRes]);

  /**
   * Table的操作方法
   * */
  const getTableOperateFuncs = {
    onView: (record) => {
      setDetailModal({ isShow: true, resObj: record });
    },
  };

  /**
   * Table的columns
   * */
  const getTableColumn: Record<string, any>[] = useMemo(() => {
    return ManageTableSwitch(curRes, getTableOperateFuncs);
  }, [curRes]);

  return (
    <>
      <SchemaManage
        ref={RuleManageViewRef}
        searchProps={{
          switchList,
          searchList,
          onSwitch,
          onReset,
          onSearch,
        }}
        actionList={actionList}
        tableProps={{
          columns: getTableColumn,
          dataSource: data?.rows, //mockData
          rowKey: 'id',
          loading: loading,
          pagination: pagination as any,
          onPageChange: onPageChange,
        }}
      />

      {/* 详情弹窗 */}
      {detailModal?.isShow && <DetailModal onClose={() => setDetailModal({})} record={detailModal?.resObj} />}

      {/* 导出确认弹窗 */}
      {exportModal?.isShow && <ExportModal onClose={() => setExportModal({})} />}
    </>
  );
};

export default connect(({ baseLogin, navTab }: Record<string, any>) => ({
  curRes: baseLogin?.permissions,
  navTab,
}))(RuleManageView);
